<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>王恋-前端-2020</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      background: #eee;
      margin: 20px 0;
    }

    article {
      width: 21cm;
      min-height: 29.7cm;
      background: white;
      margin: 0 auto;
      overflow: auto;
      padding: 1em;
    }
  </style>
  <style media="print">
    body {
      margin: 0;
    }
  </style>
  <style>
    article {
      padding-top: 20px;
    }

    p {
      margin: .3em 0;
    }

    h1 {
      font-size: 25px;
      margin-top: 0;
    }

    h4,
    h5,
    h6 {
      font-weight: normal;
    }

    ol,
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    a {
      color: #999;
      text-decoration: none;
      border-bottom: 1px solid;
    }

    p,
    li {
      color: #666;
    }

    strong {
      font-weight: normal;
      color: #f60;
    }

    h3,
    h4,
    h5,
    h6 {
      margin: 0;
    }

    .bio {
      position: relative;
    }

    .bio img {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
  <style>
    .details {
      margin-top: 10px;
    }
  </style>
  <style>
    .projects p {
      color: #666;
    }

    .projects>ol {
      list-style-position: inside;
      margin-top: 0;
      padding: 0;
    }

    .projects>ol>li {
      margin-bottom: 24px;
    }

    .projects>ol>li>header {
      display: flex;
      justify-content: space-between;
    }

    .projects>ol>li h3 {
      display: inline-block;
    }
  </style>
  <style>
    .openSource>h2 {
      position: relative;
    }

    .openSource p {
      color: #666;
    }

    .openSource header img {
      position: absolute;
      top: 0;
      right: 0;
    }

    .openSource>ul>li {
      margin-bottom: 24px;
    }

    .openSource header {
      position: relative;
      display: flex;
      justify-content: space-between;
    }
  </style>
  <style>
    .skills>.wrapper {
      margin-top: 0;
      padding: 0;
    }

    .skills>.wrapper>ul {
      color: #666;
    }

    .skills>.wrapper strong {
      color: #f60;
    }

    .skills>.wrapper>ul>li {
      line-height: 1.2;
      margin-bottom: 10px;
    }
  </style>
  <style>
    .work>ul>li {
      display: flex;
      text-align: center;
      justify-content: space-between;
    }
  </style>
  <style>
    .education>ul>li {
      display: flex;
      text-align: center;
      justify-content: space-between;
    }
  </style>
  <style>
    .others>ul>li {
      margin-bottom: 10px;
    }
  </style>
  <style>
    @media(max-width: 500px) {
      body {
        margin: 0;
      }

      article {
        width: auto;
        height: auto;
      }

      .bio img {
        display: none;
      }

      .education>ul>li {
        flex-direction: column;
      }

      .work>ul>li {
        flex-direction: column;
      }
    }
  </style>
</head>

<body>
  <article>
    <section class="bio">
      <h1>王恋</h1>
      <p>男 | 24岁 | 深圳</p>
      <p class="contact">手机：<a href="tel:15979114406">15979114406</a> | 微信：15979114406 | 邮箱: <a
          href="mailto:15979114406@163.com">15979114406@163.com</a></p>
      <p>求职意向：前端开发工程师</p>
    </section>

    <section class="projects">
      <h2>项目经历</h2>
      <hr>
      <ol>
        <li>
          <header>
            <h3>极简记账</h3>
          </header>
          <p class="overview">
            一个基于 <strong>Vue</strong> / <strong>TypeScript</strong> 实现极简主义记账应用
          </p>
          <p>
            特点是一键极速记账，这是我为了满足自己的需求而开发的一应用，支持账目增删改查，标签管理及新建
            项目使用 <strong>Vue Cli</strong> 搭建，通过 <strong>Vue
              Router</strong> 来进行页面的跳转，使用 <strong>Vuex</strong> 储存数据，使用 <strong>Day.js</strong>
            处理时间和日期，并使用<strong> TypeScript</strong> 语言写法
          </p>
          <ul class="details">
            <li><a href="https://gitee.com/williamwang123/morney" target="_blank">源代码</a>
              : https://gitee.com/williamwang123/morney
            </li>
            <li>
              <a href="http://williamwang123.gitee.io/morney-website" target="_blank">预览</a>
              : http://williamwang123.gitee.io/morney-website
            </li>
          </ul>
        </li>

        <li>
          <header>
            <h3>后台管理系统</h3>
          </header>
          <p class="overview">基于 <strong>Vue</strong> / <strong>Vue Router</strong> / <strong>Axios</strong> /
            <strong>webpack</strong> 实现，采用了<strong>Element-UI 框架</strong>。该项目是一套电商后台管理系统，包括用户登录退出，商品列表和详情展示，品类列表、添加
            和修改类，查看和处理用户订单四大核心功能，项目采用的是前后端分离技术，前端采用的是 Vue 框架及 Axios 进行开发
          </p>

        </li>

        <li>
          <header>
            <h3>小灰导航</h3>
          </header>
          <p class="overview">
            这是一个基于 <strong>jQuery</strong> 单页面应用
          </p>
          <p>
            一个简洁易用的前航页面，支持 Tab 一键切换，支持收藏页面的新建和删除，支持<strong>响应式布局</strong>，使用 <strong>jQuery</strong> 进行 DOM
            的操作, 移动端和pc 端都可使用
          </p>
          <ul class="details">
            <li><a href="https://gitee.com/williamwang123/nav" target="_blank">源代码</a>
              : https://gitee.com/williamwang123/nav
            </li>
            <li>
              <a href="http://williamwang123.gitee.io/nav/dist/index.html" target="_blank">预览</a>
              : http://williamwang123.gitee.io/nav/dist/index.html
            </li>
          </ul>
        </li>
        <li>
          <header>
            <h3>Canvas在线画板</h3>
          </header>
          <p>用 <strong>Canvas</strong> 做的一个在线画板</p>
          <p>主要调用canvas api, 实现划线、调色、橡皮擦、保存等功能</p>
          <ul class="details">
            <li><a href="https://gitee.com/williamwang123/canvas-demo" target="_blank">源代码</a>
              : https://gitee.com/williamwang123/canvas-demo
            </li>
            <li>
              <a href="http://williamwang123.gitee.io/canvas-demo/dist/" target="_blank">预览</a>
              : http://williamwang123.gitee.io/canvas-demo/dist/
            </li>
          </ul>
        </li>
        <li class="contain-img">
          <header>
            <h3>CSS 画一个米老鼠</h3>
          </header>
          <p>用 <strong>CSS3和动画</strong> 制作的一个可爱作品，会动的代码，一步一步画出米奇</p>
          <ul class="details">
            <li><a href="https://gitee.com/williamwang123/mickey-mouse" target="_blank">源代码</a>
              : https://gitee.com/williamwang123/mickey-mouse
            </li>
            <li>
              <a href="http://williamwang123.gitee.io/mickey-mouse/dist/" target="_blank">预览</a>
              : http://williamwang123.gitee.io/mickey-mouse/dist/
            </li>
          </ul>
        </li>
      </ol>
    </section>

    <section class="openSource">
      <h2>开源项目</h2>
      <hr>
      <ul>
        <li>
          <header>
            <h3>自己写的 DOM 库</h3>
            <span>
              <a href="https://gitee.com/williamwang123/dom" target="blank">源代码</a>
            </span>
          </header>
          <p>实现了元素选择、元素创建、<strong>事件委托</strong> 等常见功能</p>
        </li>
      </ul>
    </section>

    <section class="others">
      <h2>其他链接</h2>
      <hr>
      <ul>
        <li><a href="https://juejin.im/user/2313028196898375/posts" target="_blank">我的博客</a>: 目前已有 30+ 篇技术文章</li>
      </ul>
    </section>

    <section class="skills">
      <h2>技能</h2>
      <hr>
      <div class="wrapper">
        <div id="skills" class="x"></div>
        <ul>
          <li>熟悉页面制作技巧, 能将设计稿<strong>完美还原</strong></li>
          <li>熟悉<strong>前后端分离</strong>技术, 包括 AJAX、跨域、前端路由、Cookie、Session 等 </li>
          <li>熟悉 <strong>Vue 全家桶</strong>的使用, 包括 Vue Cli、VueRouter、Vuex 等</li>
          <li>了解 <strong>TypeScript</strong> 的使用, 项目几乎都是 TS 实现的</li>
          <li>熟悉<strong>前端开发工具</strong>, 包括 Git, npm / yarn, webpack 等</li>
          <li>英语: <strong>CET-4</strong>, 善用google, stackoverflow</li>
        </ul>
      </div>
    </section>

    <section class="education">
      <h2>教育背景</h2>
      <hr>
      <ul>
        <li>
          <p>江西机电学院</p>
          <p>机械设计与制造 - 统招</p>
          <span><time>2014年9月</time> ~ <time>2017年7月</time></span>
        </li>
        <li>
          <p>南昌航空大学</p>
          <p>机械制造自动化 - 自考</p>
          <span><time>2014年9月</time> ~ <time>2018年6月</time></span>
        </li>
      </ul>
    </section>

    <section class="work">
      <h2>工作经历</h2>
      <hr>
      <ul>
        <li>
          <p>深圳市格德模具</p>
          <p>模具设计师</p>
          <span><time>2017年9月</time> ~ <time>2018年8月</time></span>
        </li>
        <li>
          <p>深圳市雄合锋科技</p>
          <p>项目助理</p>
          <span><time>2018年9月</time> ~ <time>2020年10月</time></span>
        </li>
      </ul>
    </section>

    <section class="education">

      <h2>个人评价</h2>
      <hr>
      <p>1. 对编程有浓厚兴趣，爱逛开发论坛，拥有总结书写技术博客的习惯</p>
      <p>2. 上进心强，勤于学习能不断提高自身的能力与综合素质</p>
      <p>3. 对待工作认真负责，善于沟通，协调，有较强的沟通能力与团队协作意识</p>
    </section>

  </article>
  <script src="main.js"></script>
</body>

</html>